<template>
  <div id="signIn">
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="90px"
      >
        <el-form-item label="" prop="isAll" class="margin0">
          <el-radio-group v-model="ruleForm.isAll">
            <el-radio
              v-for="item in dailyLimitList"
              :key="item.dictValue"
              :label="item.dictValue"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="每日签到"
          prop="getIntegral"
          class="small"
          v-if="ruleForm.isAll === 'true'"
        >
          可获得
          <el-input-number
            v-model.number="ruleForm.getIntegral"
            size="mini"
            :min="1"
            :max="9999"
            :controls="false"
            :step="1"
            step-strictly
          ></el-input-number
          >积分
        </el-form-item>
        <dl v-if="ruleForm.isAll === 'false'">
          <dd>
            <el-form-item
              label=" "
              prop="theFirstDay"
              class="margin0 small sign-list"
            >
              签到第一日，可获得
              <el-input-number
                v-model.number="ruleForm.theFirstDay"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </dd>
          <dd>
            <el-form-item
              label=" "
              prop="theSecondDay"
              class="margin0 small sign-list"
            >
              签到第二日，可获得
              <el-input-number
                v-model.number="ruleForm.theSecondDay"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </dd>
          <dd>
            <el-form-item
              label=" "
              prop="theThirdDay"
              class="margin0 small sign-list"
            >
              签到第三日，可获得
              <el-input-number
                v-model.number="ruleForm.theThirdDay"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </dd>
          <dd>
            <el-form-item
              label=" "
              prop="theForthDay"
              class="margin0 small sign-list"
            >
              签到第四日，可获得
              <el-input-number
                v-model.number="ruleForm.theForthDay"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </dd>
          <dd>
            <el-form-item
              label=" "
              prop="theFifthDay"
              class="margin0 small sign-list"
            >
              签到第五日，可获得
              <el-input-number
                v-model.number="ruleForm.theFifthDay"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </dd>
          <dd>
            <el-form-item
              label=" "
              prop="theSixthDay"
              class="margin0 small sign-list"
            >
              签到第六日，可获得
              <el-input-number
                v-model.number="ruleForm.theSixthDay"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </dd>
          <dd>
            <el-form-item
              label=" "
              prop="theSeventhDay"
              class="margin0 small sign-list"
            >
              签到第七日，可获得
              <el-input-number
                v-model.number="ruleForm.theSeventhDay"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </dd>
        </dl>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'

export default {
  name: 'signIn',
  msg: '每日签到',
  watch: {
    'ruleForm.isAll': {
      handler(newVal, oldVal) {
        if (newVal === 'true') {
          //积分相同
          this.ruleForm.theFirstDay = 0
          this.ruleForm.theSecondDay = 0
          this.ruleForm.theThirdDay = 0
          this.ruleForm.theForthDay = 0
          this.ruleForm.theFifthDay = 0
          this.ruleForm.theSixthDay = 0
          this.ruleForm.theSeventhDay = 0
        } else {
          this.ruleForm.getIntegral = 1
        }
      },
      deep: true
    }
  },
  data() {
    return {
      dailyLimitList: [],
      ruleForm: {
        isAll: '', //积分是否全部相同
        getIntegral: 1, //多少积分
        theFirstDay: 0, //签到1天可得积分
        theSecondDay: 0, //签到2天可得积分
        theThirdDay: 0, //签到3天可得积分
        theForthDay: 0, //签到4天可得积分
        theFifthDay: 0, //签到5天可得积分
        theSixthDay: 0, //签到6天可得积分
        theSeventhDay: 0 //签到7天可得积分
      },
      rules: {
        isAll: {
          required: true,
          message: '请选择积分规则设置',
          trigger: 'bluer'
        },
        getIntegral: {
          required: true,
          message: '积分不能为空',
          trigger: 'change',
          type: 'number'
        },
        theFirstDay: {
          type: 'number',
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        theSecondDay: {
          type: 'number',
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        theThirdDay: {
          type: 'number',
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        theForthDay: {
          type: 'number',
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        theFifthDay: {
          type: 'number',
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        theSixthDay: {
          type: 'number',
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        theSeventhDay: {
          type: 'number',
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        }
      }
    }
  },
  mounted() {
    this.getStatusList()
  },
  methods: {
    /* 获取字典状态 */
    async getStatusList() {
      this.dailyLimitList = await sysNormalDisable('strategy_rules')
      this.ruleForm.isAll = this.dailyLimitList[0].dictValue
    },
    //表单赋值
    setForm(formData) {
      let { isAll, getIntegral, subtaskDTO } = formData
      this.ruleForm.isAll = isAll.toString()
      this.ruleForm.getIntegral = getIntegral
      if (subtaskDTO && subtaskDTO.length > 0) {
        subtaskDTO.forEach((item) => {
          let [key, value] = [item.toEdit, item.integralNumber]
          this.ruleForm[key] = value
        })
      }
    },
    //表单校验 & 数据提交
    checkForm() {
      let obj = { ...this.ruleForm }
      this.$emit('setComRuleForm', obj)
      let _this = this
      return new Promise((resolve, reject) => {
        _this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            resolve(true)
          } else {
            reject(false)
          }
        })
      })
    }
  }
}
</script>

<style lang="less">
#signIn {
  .margin0 {
    margin-bottom: 0 !important;
    .el-form-item__content {
      margin-left: 5px !important;
    }
  }
  .sign-list {
    color: #333;
    .el-form-item__label {
      width: 20px !important;
    }
  }
  dd {
    margin-bottom: 0;
  }
  .el-form-item__error {
    position: initial;
    display: inline-block;
  }
  .el-input-number {
    margin: 0 6px;
  }
}
</style>
